<template>
  <div class="relative">
    <div class="px-1rem py-20px flex flex-col">
      <div class="flex justify-between">
        <div class="flex flex-col">
          <span class="text-[20px] font-bold">{{ info.talentCompanyJob?.jobName }}</span>
          <span
            class="text-price_red text-[16px] mt-0.5rem"
            v-if="info.talentCompanyJob?.salaryMin || info.talentCompanyJob?.salaryMax"
          >
            <span v-if="info.talentCompanyJob?.salaryMin">{{
              formatPrice(info.talentCompanyJob?.salaryMin)
            }}</span>
            <span v-if="info.talentCompanyJob?.salaryMin && info.talentCompanyJob?.salaryMax"
              >-</span
            >
            <span v-if="info.talentCompanyJob?.salaryMax">{{
              formatPrice(info.talentCompanyJob?.salaryMax)
            }}</span>
            <span>{{ getCurrency(info.talentCompanyJob?.currency)?.name }}</span>
          </span>
          <span v-else>面议</span>
        </div>
      </div>
      <span class="text-[16px] mt-0.5rem flex flex-wrap">
        <div class="mr-10px flex">
          <div class="w-1em mr-5px">
            <svg
              t="1733132313807"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4351"
            >
              <path
                d="M389.242 295.194c0-78.08-63.295-141.374-141.375-141.374s-141.374 63.296-141.374 141.374c0 38.008 15.002 72.509 39.403 97.914-6.61 27.859-10.116 56.919-10.116 86.8 0 134.41 70.784 252.285 177.106 318.39l28.273-116.161c-57.738-48.378-94.462-121.011-94.462-202.23 0-14.771 1.215-29.26 3.55-43.368 76.98-1.273 138.995-64.062 138.995-141.345z m121.185-79.019c48.88 0 94.646 13.309 133.892 36.484-6.17 15.876-9.562 33.14-9.562 51.196 0 78.08 63.295 141.374 141.374 141.374s141.374-63.295 141.374-141.374-63.296-141.373-141.374-141.373c-18.294 0-35.776 3.475-51.823 9.8-60.646-42.245-134.368-67.023-213.88-67.023-53.853 0-105.05 11.368-151.328 31.826l64.636 93.688c27.154-9.446 56.32-14.598 86.691-14.598z m263.455 275.54c-4.237 96.124-59.925 178.877-140.2 221.396-23.399-45.78-71.02-77.12-125.961-77.12-78.08 0-141.375 63.296-141.375 141.374S429.64 918.739 507.72 918.739c58.613 0 108.896-35.672 130.323-86.49 144.08-52.196 247.03-190.245 247.03-352.344 0-8.298-0.273-16.533-0.804-24.695l-110.388 36.505z"
                fill="#2c3e50"
                p-id="4352"
              ></path>
            </svg>
          </div>
          {{
            config.getGZJYCode.find((node) => node.id === info.talentCompanyJob?.workLifeId)?.name
          }}
        </div>

        <div class="mr-10px">
          <SvgIcon name="mdi:worker-outline" class="mr-5px" />
          <span>招聘{{ info.talentCompanyJob?.recruitingNumbers }}人</span>
        </div>
        <div class="flex items-center">
          <SvgIcon name="mingcute:birthday-2-line" class="mr-5px" />
          <span>
            年龄{{ info.talentCompanyJob?.ageMin }}
            <span>-</span>
            {{ info.talentCompanyJob?.ageMin }}岁
          </span>
        </div>
      </span>
      <div class="my-10px">
        招聘范围：
        <CountryIcon :countryId="info.talentCompanyJob?.countryScope" />
      </div>
      <!-- <div class="grid grid-col-2">
      <div>收藏职位</div>
      <div>收藏职位</div>
    </div> -->
      <el-divider />
      <div class="job-divider mt-0.5rem">
        <em></em>
        <span>{{ '职位详情' }}</span>
      </div>
      <div class="pt-20px grid grid-cols-2 gap-10px text-14px mb-10px">
        <div>所属行业：{{ info.talentCompanyJob?.category3Name }}</div>
        <div>招聘：{{ info.talentCompanyJob?.recruitingNumbers || 1 }} （人）</div>
        <div>专业要求：{{ info.talentCompanyJob?.speciality || '无要求' }}</div>
        <div>
          学历：{{
            config.getXLCode.find((node) => node.id === info.talentCompanyJob?.education)?.name ||
            '无要求'
          }}
        </div>

        <div>
          提供食宿：{{
            config.getYQSSCode.find((node) => node.id === info.talentCompanyJob?.accommodationId)
              ?.name || '不提供食宿'
          }}
        </div>
        <div>
          是否全职：{{
            config.getSFQZCode.find((node) => node.id === info.talentCompanyJob?.jobStatusId)
              ?.name || '全职'
          }}
        </div>
        <div>
          年龄：
          <span v-show="info.talentCompanyJob?.ageMin || info.talentCompanyJob?.ageMax">
            <span>{{ info.talentCompanyJob?.ageMin }}</span>
            <span v-show="info.talentCompanyJob?.ageMin && info.talentCompanyJob?.ageMax">-</span>
            <span>{{ info.talentCompanyJob?.ageMax }}</span>
            <span>岁</span>
          </span>
          <span v-show="!(info.talentCompanyJob?.ageMin || info.talentCompanyJob?.ageMax)"
            >无要求</span
          >
        </div>
        <div class="col-span-2">
          工作地点：
          {{ info.talentCompanyJob?.countryName }}
          <span v-if="info.talentCompanyJob?.cityName">{{
            '-' + info.talentCompanyJob?.cityName
          }}</span>
          {{ '-' + info.talentCompanyJob?.address }}
        </div>
      </div>
      <el-divider />
      <div class="job-divider mt-0.5rem">
        <em></em>
        <span>{{ '雇主提供工作签证' }}</span>
      </div>
      <div class="mb-10px text-price_red pt-10px">
        {{
          config.getGZQZCode.find((node) => node.id === info.talentCompanyJob?.workVisaId)?.name ||
          '否'
        }}
      </div>
      <el-divider />
      <div class="job-divider mt-0.5rem">
        <em></em>
        <span>{{ '岗位要求' }}</span>
      </div>
      <div class="mb-10px pt-10px" v-html="info.talentCompanyJob?.postDesc"></div>
      <el-divider />
      <div class="job-divider mt-0.5rem">
        <em></em>
        <span>{{ '公司简介' }}</span>
      </div>
      <div class="flex flex-col mb-10px mt-0.5rem">
        <div class="flex">
          <div class="border mr-10px">
            <el-image :src="info.company?.companyDesc?.logoImage" class="w-3rem aspect-square" />
          </div>
          <div class="flex flex-col justify-center">
            <span class="text-16px font-bold">{{ info.company?.companyName }}</span>
            <div class="flex items-center">
              <div class="flex mt-5px mr-5px items-center">
                <div v-if="info.company?.companyModel">
                  <SvgIcon name="bx:category" class="md mr-5px" />{{
                    config.getJYMSCode.find((node) => node.id === info.company?.companyModel)?.name
                  }}
                </div>
              </div>

              <div class="flex mt-5px mr-5px items-center">
                <div v-if="info.company?.natureType">
                  <!-- <span>{{ company }}</span> -->
                  <SvgIcon name="bx:donate-heart" class="md mr-5px" />
                  {{
                    config.getQYJYXSCode.find((node) => node.id === info.company?.natureType)?.name
                  }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="w-full flex flex-center py-10px border mt-0.5rem bg-[#f8eae9] border-primary text-primary rounded-5px"
          @click="$router.push('/company?id=' + info.company?.id)"
        >
          公司主页
        </div>
      </div>
      <div
        class="mb-10px pt-10px"
        v-html="info.company?.companyDesc?.introductionHtml"
        v-show="info.company?.companyDesc?.introductionHtml"
      ></div>
      <el-divider />
      <div class="job-divider mt-0.5rem" v-show="similarJobList.length > 0">
        <em></em>
        <span>{{ '相似职位' }}</span>
      </div>
      <div class="pt-10px px-10px" v-show="similarJobList.length > 0">
        <div
          class="border px-10px py-10px flex flex-col text-14px mt-0.5rem"
          v-for="item in similarJobList"
          :key="item.id"
        >
          <span class="text-16px font-bold mb-5px">{{ item.jobName }}</span>
          <span class="text-primary mb-5px">{{ item.companyName }}</span>
          <span>
            <span v-show="Number(item.salaryType) !== 3">
              {{ config.getXZJGCode.find((node) => node.id === item.salaryType)?.name }}
            </span>
            {{ formatPrice(item.salaryMin) }}
            <span v-show="item.salaryMin && item.salaryMax">-</span>
            {{ formatPrice(item.salaryMax) }}
            {{ getCurrency(item.currency)?.name }}
          </span>
        </div>
      </div>
    </div>
    <div
      class="sticky bottom-0px left-0 w-100vw bg-white p-1rem flex justify-between items-center border-t"
    >
      <div class="min-w-20vw flex-2 flex flex-col justify-center items-center" @click="collectJob">
        <SvgIcon
          name="flowbite:star-outline"
          class="md mb-0.2rem"
          v-show="info.talentCompanyJob?.isFavorite === 0"
        />
        <SvgIcon
          name="flowbite:star-solid"
          class="md mb-0.2rem text-primary"
          v-show="info.talentCompanyJob?.isFavorite === 1"
        />
        <span>{{ info.talentCompanyJob?.isFavorite === 0 ? '收藏职位' : '已收藏' }}</span>
      </div>
      <div class="min-w-20vw flex-2 flex flex-col justify-center items-center" @click="toResume">
        <SvgIcon name="mdi:near-me" class="md mb-0.2rem" />
        <span>投递简历</span>
      </div>
      <div
        class="flex flex-center py-0.6rem px-10px border bg-[#f8eae9] border-primary text-primary rounded-5px max-w-50vw min-w-45vw h-full"
        @click="toVideo"
      >
        <SvgIcon name="mdi:video-outline" class="md text-primary mr-5px" />
        视频面试
      </div>
    </div>
    <van-action-sheet v-model:show="showMyVita" title="选择要投递的简历">
      <div class="relative">
        <div class="px-1rem">
          <van-radio-group v-model="targetVitaId" shape="square">
            <div
              v-for="item in vitaList"
              :key="item.id"
              class="py-0.8rem pl-1rem border mb-0.5rem"
              @click="targetVitaId = item.id"
            >
              <van-radio :name="item.id">
                <div>{{ item.name }}</div>
              </van-radio>
              <div class="mt-0.5rem">
                <span>更新时间： {{ formatePaddingZeroDate(item.updateDate) }}</span>
              </div>
            </div>
          </van-radio-group>

          <el-empty :description="'暂无查询数据'" v-show="vitaList.length == 0" />
        </div>
        <div
          class="sticky bottom-0px left-0px py-1rem px-1rem bg-white flex border-t justify-center px-1rem"
        >
          <div
            class="mr-1rem flex-1 bg-primary text-white py-0.5rem flex flex-center rounded"
            @click="sendVita"
          >
            投递简历
          </div>
          <div class="flex-1 border py-0.5rem flex flex-center rounded" @click="showMyVita = false">
            取消
          </div>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script setup>
import { ref, inject } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import {
  getJobDetail,
  findSimilarJob,
  jobCollectOperate,
  getVitaList,
  hasSentJob,
  jobSendResume,
} from '@/api/talent'
import { formatPrice, getCurrency } from '@/utils/price'
import { useConfigStore } from '@/stores/config'
import SvgIcon from '@/components/Icon.vue'
import CountryIcon from '@/components/countryIcon.vue'
import { onActivated } from 'vue'
import { usePermissionStore } from '@/stores/permission'
import { useUserStore } from '@/stores/user'
import Cookies from 'js-cookie'
import { formatePaddingZeroDate } from '@/utils/data'

const router = useRouter()
const backToTop = inject('toTop')
const config = useConfigStore()
const permission = usePermissionStore()
const route = useRoute()
const info = ref({})
const similarJobList = ref([])
const userPermission = ref(false)
const userStore = useUserStore()
const showMyVita = ref(false)
const vitaList = ref([])
const targetVitaId = ref(null)
const hasSend = ref(false)

// 获取权限
const getPermission = async () => {
  const res = await permission.getPermissionByCode('YINGPIN')
  userPermission.value = res
}

// 职位是否已投递
const getSendReward = () => {
  hasSentJob(route.query.id).then((res) => {
    if (res.code === 20000) {
      hasSend.value = res.data
    }
  })
}

// 投递简历
const sendVita = () => {
  jobSendResume({
    jobId: route.query.id,
    vitaId: targetVitaId.value,
  }).then((res) => {
    if (res.code === 20000) {
      showMyVita.value = false
      getSendReward()
    }
  })
}

const init = () => {
  if (route.query?.id) {
    const id = route.query.id
    getJobDetail(id).then((res) => {
      if (res.code === 20000) {
        info.value = res.data
        findSimilarJob({
          category1Id: info.value.talentCompanyJob?.category1Id || null,
          category2Id: info.value.talentCompanyJob?.category2Id || null,
          category3Id: info.value.talentCompanyJob?.category3Id || null,
          current: 1,
          size: 5,
          id,
        }).then((res) => {
          if (res.code === 20000 && res.data?.records) similarJobList.value = res.data.records
        })
      }
    })
    getPermission()
    getMyVita()
    getSendReward()
  }
}

// 获取我的简历列表
const getMyVita = () => {
  userStore.isLogin().then((res) => {
    if (res) {
      getVitaList({
        current: 1,
        size: 99,
      }).then(({ code, data }) => {
        if (code === 20000) {
          vitaList.value = data.records
        }
      })
    }
  })
}

// 投递简历
const toResume = () => {
  checkPermission(() => {
    showMyVita.value = true
  })
}

// 校验权限
const checkPermission = (callback) => {
  if (!Cookies.get('token')) {
    return showDialog({
      title: '提示',
      message: '请先登录',
    }).then(() => {
      // on close
      backToTop()
      router.push('/login')
    })
  } else if (!userPermission.value) {
    return showDialog({
      title: '提示',
      message: '您未开通人才链应聘功能，是否前往开通？',
      showCancelButton: true,
    }).then(() => {
      // on close
      backToTop()
      router.push('/module?code=YINGPIN')
    })
  }
  callback && callback()
  return true
}

// 收藏职位
const collectJob = () => {
  checkPermission(() => {
    jobCollectOperate(route.query?.id).then((res) => {
      if (res.code === 20000) {
        if (info.value.talentCompanyJob?.isFavorite === 0) {
          info.value.talentCompanyJob.isFavorite = 1
          showDialog({
            title: '提示',
            message: '收藏成功',
          })
        } else {
          info.value.talentCompanyJob.isFavorite = 0
          showDialog({
            title: '提示',
            message: '取消收藏成功',
          })
        }
      }
    })
  })
}

// 前往视频面试
const toVideo = () => {
  checkPermission(() => {
    showDialog({
      title: '提示',
      message: '功能正在完善中...',
    })
  })
}

const onNav = (path) => {
  window.open('https://www.rcep.cn' + path, '_blank')
}

init()

onActivated(() => {
  init()
})
</script>
